<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('课程内容列表')"/>
        <th:block th:include="include :: layout-latest-css"/>
        <th:block th:include="include :: ztree-css"/>
        <style>
            .content {
                width: 800px;
                margin: 0 auto;
                background: #fff;
                border-radius: 6px;
                margin-top: 10px;
                padding-top: 5px;
                padding-bottom: 13px;
                box-shadow: 1px 1px 3px rgb(0 0 0 20%);

            }

            .item {
                padding-top: 10px;
            }

            .item a {
                color: #333;
                outline: none;
            }

            .item a:HOVER {
                background-color: yellow;
                text-decoration: none;
            }

            .cover {
                width: 180px;
                height: 120px;
                margin: auto;
            }

            .cover img {
                width: 180px;
                height: 120px;
            }

            .item-right {
                padding-top: 20px;
            }
            .cover {
                padding-top: 30px;
            }

            .line {
                line-height: 30px;
                margin-left: -50px;
            }

            .title {
                font-size: 16px;
                font-weight: bold;
            }

            .border {
                width: 100%;
                height: 1px;
                border-bottom: #1a1a1a;
                border-bottom-width: 1px;
            }

            .rate {
                margin-bottom: 4px;
            }

            .intro{
                width: 500px;
                padding-left: 14px;
                text-indent: 2em;
            }

            .intro .txt{
                width: 500px;
                text-indent: 2em;
            }
        </style>
    </head>
    <body class="gray-bg">

        <div class="ui-layout-center">
            <div class="container-div">
<!--                <div class="row">-->
<!--                    [[${course}]]-->
<!--                </div>-->
<!--                <div class="row">-->
<!--                    [[${courseDetailList}]]-->
<!--                </div>-->
                <div class="col-sm-12  ">
                    <div class="content" >
                        <div id="content">
                            <div class="row item">

                                <div class="row">
                                    <div class="col-sm-4 ">
                                        <div class="cover">
                                            <img th:src="${course.host+course.coverUrl}" alt="">
                                        </div>
                                    </div>
                                    <div class="col-sm-8 item-right">
                                        <div class="row line">
                                            <div class="col-sm-6 title" th:text="${course.courseName}">脊柱外科基础知识与前沿技术</div>
                                            <div class="col-sm-6">关注度: <img th:src="'/img/xin_'+${#strings.substring(course.focusScore,0,1)}+'.gif'"   class="rate"></div>
                                        </div>
                                        <div class="row line">
                                            <div class="col-sm-6"><span>项目负责人：</span> <span th:text="${course.projectLeader}">肖斌</span></div>
                                            <div class="col-sm-6"><span>单位：</span> <span th:text="${course.projectOrg}">北京积水潭医院/北京</span></div>
                                        </div>
                                        <div class="row line">
                                            <div class="col-sm-6"><span th:text="${course.projectTypeLabel}">国家I类</span> <span th:text="${course.courseScore}">5.0</span>学分</div>

                                        </div>
                                        <div class="row line intro">
                                            <span>&ensp;&ensp;&ensp;&ensp;</span>
                                            <span class="txt" th:text="${course.introduce}">
                                                本项目旨在提高临床医生对于糖尿病规范化近期处置及远期综合管理能力，加强临床医生对
                                            </span>
                                        </div>


                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div class="row item" th:each="detail:${courseDetailList}">

                                <div class="row">
                                    <div class="col-sm-1 ">

                                    </div>
                                    <div class="col-sm-11 item-right">
                                        <div class="row line">
                                            <div class="col-sm-10 title" th:text="${detail.title}">脊柱外科基础知识与前沿技术</div>
                                            <div class="col-sm-2">
                                                <span class="btn btn-primary btn-rounded btn-sm" th:if="${detail.passed} eq 1 " th:onclick="goLearn([[${detail.id}]])">已学习</span>
                                                <span class="btn btn-warning btn-rounded btn-sm" th:if="${detail.passed} ne 1 " th:onclick="goLearn([[${detail.id}]])">未学习</span>
                                            </div>
                                        </div>
                                        <div class="row line">
                                            <div class="col-sm-5"><span>授课老师：</span> <span th:text="${detail.teacherName}">肖斌</span></div>
                                            <div class="col-sm-5"><span>单位：</span> <span th:text="${detail.org}">北京积水潭医院/北京</span></div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>

        <th:block th:include="include :: footer"/>
        <script th:inline="javascript">

            var prefix               = ctx + "biz/courseNav";

            function goLearn(id){
                console.log(id)
                const url = prefix+'/goLearn/'+id
                $.modal.openTab("课程学习", url);
                // window.location.href = url
            }
        </script>
     </body>
</html>